<template>
	<view>
		<view class="search-area">
			<view class="search main-center" @click="toSearch">
				<image class="icon-search" src="/static/image/icon/icon-search.png"></image>
				<text>搜朋友的珠宝店</text>
			</view>
		</view>

		<!-- 导航1 -->
		<view class="" style="margin-top: 100rpx;">
			<!-- 176-20 -->
			<app-navigation-icon navHeight="156" iconRadius="16rpx" navMargin="20rpx auto" :navs="navs"
				background="#f7f7f7" :scroll="true" columns="5" :rows="2">
			</app-navigation-icon>
		</view>

		<!-- banner -->

		<view v-if="banners.length > 0" style="width: 686rpx;margin: 20rpx auto 32rpx;border-radius: 32rpx;">
			<app-swiper :list="banners" borderRadius="32" mode="rect" name="icon_url" :height="242" :autoplay="false">
			</app-swiper>
		</view>

		<!-- <view class="bepartner" @click="toapply">
			<view class="bebg">
				<image src="../../static/image/index/bgs1.png"></image>
			</view>

			<view class="beimg">
				<image src="../../static/image/index/bepart.png" alt=""></image>
			</view>

			<view class="befont">
				开店申请
			</view>
		</view> -->
		<view class="today" @click="toapply(applyimg[0].url)">
			<image :src="applyimg[0].icon_url" class="image" mode="widthFix" :lazy-load="true"></image>
		</view>
		<view class="moturnover" v-if="issuchop == true">
			<view class="moturnover-item">
				<image :src="item.icon_url" v-for="(item,index) in turnover" :key="index" v-if="index < 2"
					@click="jump(item.url)" mode="widthFix"></image>
			</view>
			<view class="moturnover-bottom" v-for="(item,index) in turnover" :key="index" v-if="index == 2"
				@click="jump(item.url)">
				<image :src="item.icon_url" mode="widthFix"></image>
			</view>
		</view>
		<view class="beturnstore" v-for="(item,index) in list" :key="index" @click="jumptostore(item)">
			<view class="beturnimage">
				<image class="image" :src="item.user.userInfo.avatar"></image>
			</view>
			<view class="beturntext">
				{{item.name}}的珠宝店
			</view>
		</view>
		<!-- 返回顶部 -->
		<view class="quick-box dir-top-nowrap" style="bottom: 180rpx" v-if="opacity == 1">
			<image @click="backTop" class="quick-btn" src="../../static/image/icon/back-top.png"></image>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import appSearchFor from '../../components/page-component/app-search-for/app-search-for.vue'
	import appNavigationIcon from '../../components/page-component/app-navigation-icon/app-navigation-icon.vue'
	import appSwiper from '../../components/page-component/app-swiper/app-swiper.vue'

	export default {
		name: 'applyStroe',
		data() {
			return {
				value: {
					background: `#f7f7f7`,
					color: '#f7f7f7',
					placeholder: '搜朋友的店',
					radius: 28,
					textColor: '#c0c0c0',
					textPosition: `center`,
					shadow: `0 16rpx 32rpx rgba(0, 0, 0, 0.1);`
				},
				type: '',
				homePages: [],
				navs: [],
				banners: [],
				turnover: [],
				list: [],
				page: 1,
				limit: 20,
				page_count: 1,
				applyimg: [],
				// 返回顶部
				top: 400,
				scrollTop: 0,
				opacity: 0,

				issuchop: false,

			}
		},
		onLoad() {
			this.issuchop = false
			this.loadList()
			// this.loadnavs()
			this.allReq(5)
			this.allReq(104)
			this.allReq(669)
			this.allReq(742)
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		onShow() {
			if (this.$user.isLogin()) {
				if (this.userInfo.vdian_id != null) {
					this.$request({
						url: this.$api.apply.store,
						data: {
							id: this.userInfo.vdian_id
						},
						method: 'get',
					}).then(res => {
						if (res.data.review_status == 1) {
							this.issuchop = true
						} else {
							this.issuchop = false
						}
					}).catch(e => {

					})
				} else {
					this.issuchop = false
				}
			} else {
				this.issuchop = false
			}
		},
		// 返回顶部
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		computed: {
			// 返回顶部
			showBackTop() {
				// 由于scrollTop为页面的滚动距离，默认为px单位，这里将用于传入的top(rpx)值
				// 转为px用于比较，如果滚动条到顶的距离大于设定的距离，就显示返回顶部的按钮
				return this.scrollTop > uni.upx2px(this.top);
			},
			...mapState({
				userInfo: state => state.user.info
			}),
		},
		watch: {
			// 返回顶部
			showBackTop(nVal, oVal) {
				// 当组件的显示与隐藏状态发生跳变时，修改组件的层级和不透明度
				// 让组件有显示和消失的动画效果，如果用v-if控制组件状态，将无设置动画效果
				if (nVal) {
					this.opacity = 1;
				} else {
					this.opacity = 0;
				}
			},
		},
		onShareAppMessage() {
			return this.$shareAppMessage({
				title: '成为双熙堂合伙人',
				params: {

				}
			});
		},
		onShareTimeline() {
			return this.$shareTimeline({
				title: '成为双熙堂合伙人',
				query: {

				}
			});
		},
		onReachBottom() {
			if (this.page_count > this.page) {
				this.page++
				this.loadList()
			} else {
				const listSt = this.$storage.getStorageSync('storeList')
				if (listSt) {
					this.list = this.list.concat(listSt)
				} else {
					this.page = 1
					this.loadList()
				}
			}
		},
		components: {
			appSearchFor,
			appNavigationIcon,
			appSwiper
		},
		methods: {
			toSearch() {
				uni.navigateTo({
					url: `/pages/bepartner/search`
				})
			},
			// 返回顶部
			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			jump(item) {
				uni.navigateTo({
					url: item
				})
			},
			jumptostore(item) {
				uni.navigateTo({
					url: '/pages/store/mine/mine?vid=' + item.id
				})
			},
			toapply(item) {
				if (this.$store.state.user.accessToken === '' || this.$store.state.user.accessToken === null) {
					this.$store.dispatch('user/accessToken');
				} else {
					uni.navigateTo({
						url: item
					});
				}
			},
			loadList() {
				this.$request({
					url: this.$api.apply.list,
					data: {
						page: this.page,
						limit: 20,
						mch_id: 0,
						review_status: 1
					}
				}).then((res) => {
					this.list = this.list.concat(res.data.list)
					this.page_count = res.data.pagination.page_count
					this.$storage.setStorageSync('storeList', this.list)
				}).catch(err => {
					console.log(err);
				})
			},
			allReq(pid) {
				this.$request({
					url: this.$api.navs.list,
					data: {
						pid: pid,
						status: 1
					}
				}).then((res) => {
					if (pid == 5) {
						this.banners = res.data.list
					} else if (pid == 104) {
						this.turnover = res.data.list
					} else if (pid == 669) {
						this.navs = res.data.list
					} else if (pid == 742) {
						this.applyimg = res.data.list
					}
				}).catch(() => {

				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.search-area {
		position: fixed;
		z-index: 3;
		top: 0;
		left: 0;
		right: 0;
		height: #{88rpx};
		line-height: #{88rpx};
		width: 100%;
		background-color: #efeff4;
		padding: #{12rpx} #{24rpx};

		.search {
			height: #{64rpx};
			line-height: #{64rpx};
			border-radius: #{32rpx};
			background-color: #fff;
			color: #b2b2b2;
			font-size:#{26rpx};

			&.be-search {
				color: #353535;
				padding-left: 32rpx;

				.icon-search {
					margin-right: 10rpx;
				}
			}

			.icon-search {
				height: #{24rpx};
				width: #{24rpx};
				margin-top: #{20rpx};

				&+text {
					color: #b2b2b2;
					margin:0 #{8rpx};
				}
			}
		}
	}

	.moturnover {
		width: 686rpx;
		margin: 20rpx auto;

		.moturnover-item {
			margin: 20rpx auto;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			image {
				width: 328rpx;
			}
		}

		.moturnover-bottom {
			width: 100%;
			margin: 20rpx auto;

			image {
				width: 100%;
			}
		}
	}

	.today {
		width: 686rpx;
		margin: 20rpx auto;
		box-shadow: 0px 30px 60px rgba(57, 57, 57, 0.1);
		border-radius: 32rpx;
		display: flex;
		align-items: center;

		.image {
			width: 100%;
			height: 100%;
		}
	}

	.bepartner {
		width: 686rpx;
		height: 136rpx;
		margin: 20rpx auto;
		position: relative;
		background: #FFFFFF;
		border-radius: 16rpx;
	}

	.bebg {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.bebg image {
		height: 136rpx;
		width: 136rpx;
	}

	.beimg {
		width: 96rpx;
		height: 96rpx;
		position: absolute;
		left: 106rpx;
		top: 20rpx;
	}

	.beimg image {
		width: 96rpx;
		height: 96rpx;
	}

	.befont {
		position: absolute;
		left: 234rpx;
		line-height: 136rpx;
		font-size: 36rpx;
		color: #333333;
		font-weight: bold;
	}

	// 小店循环
	.beturnstore {
		background: #FFFFFF;
		width: 686rpx;
		height: 128rpx;
		border-radius: 16rpx;
		margin: 20rpx auto;
		color: #333333;
		display: flex;
		align-items: center;
		padding: 0 48rpx;
	}

	.beturnimage {
		width: 84rpx;
		height: 84rpx;
		border-radius: 50%;
	}

	.beturnimage .image {
		width: 84rpx;
		height: 84rpx;
		border-radius: 50%;
	}

	.beturntext {
		font-size: 28rpx;
		color: #333333;
		padding-left: 32rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	// 返回顶部
	.quick-box {
		position: fixed;
		bottom: #{40rpx};
		right: #{48rpx};
		z-index: 100;
		transition: opacity 0.4s;
	}

	.quick-btn {
		width: #{80rpx};
		height: #{80rpx};
		margin-top: #{32rpx};
	}
</style>
